<template>
    <div class="page" data-page="pointBaiduMap" style="z-index: 2;">
        <div class="navbar">
            <div class="navbar-inner sliding">
                <div class="left">
                    <a href="#" class="link back" @click="$root.backToTab()">
                        <i class="icon icon-back"></i>
                        <span class="ios-only">Back</span>
                    </a>
                </div>
                <div class="title">{{$route.params.pointName}}</div>
                <div class="right" style="width: 56px">

                </div>
            </div>
        </div>

        <div class="page-content pointBaiduMap-page-content">
            <div id="show_pointBaiduMap"></div>
        </div>
    </div>
</template>
<script>
    return {
        on: {
            pageInit: function (e, page) {
                var longitude = (this.$route.params.longitude);
                var latitude = (this.$route.params.latitude);
                this.show_point_baiduMap(longitude,latitude);
            }
        },
        data: function () {
            return {

            }
        },
        methods: {
             show_point_baiduMap:function(longitude,latitude) {
               //百度地图显示
               var map = new BMap.Map('show_pointBaiduMap');
               var point = new BMap.Point(longitude, latitude);  // 创建点坐标
               map.centerAndZoom(point, 15);
               map.enableScrollWheelZoom();   //启用滚轮放大缩小，默认禁用
               map.enableContinuousZoom();    //启用地图惯性拖拽，默认禁用
               var marker = new BMap.Marker(point);        // 创建标注
               map.addOverlay(marker);                     // 将标注添加到地图中
             }
        },

    }
</script>

<style scoped>
    .navbar .right {
        margin-left: 0;
        margin-right: 0px;
    }
    #show_pointBaiduMap{
        width: 100%;height: 100%;background-color: #ffffff;
    }
</style>